<template>
  <div class="form-preview-group" :style="{ height: styleHeight }">
    <!-- 个人信息 -->
    <div class="form-preview-personal-info">
      <div class="form-preview-info-top">
        <div class="form-preview-info-left">
          <img :src="personalCenterDefaultAvatarImage" alt="" />
          <h3>{{ $t('portal.clickLogin') }}</h3>
        </div>
        <div class="form-preview-info-right">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="form-preview-info-bottom" v-if="isChinese">
        <div>
          <span>TATA木门-杭州大都会店</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <!-- 服务记录 -->
    <div class="form-preview-service-record">
      <van-grid :border="false" :column-num="4">
        <van-grid-item v-for="(item, index) in serviceList" :key="index">
          <van-image height="56" :src="item.photo" />
          <span>{{ $t(`portal.${item.text}`) }}</span>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 必备工具 -->
    <div class="form-preview-essential-tool">
      <div
        class="form-preview-tool-item"
        v-for="(item, index) in filterToolList"
        :key="index"
      >
        <div>
          <i :class="`iconfont ${item.icon}`"></i>
          <span>{{ $t(`portal.${item.title}`) }}</span>
        </div>
        <van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>

<script>
import { previewProps } from '@src/mform/components/props';
import { findComponentUpward } from '@src/util/assist';
import { getOssUrl } from '@src/util/assets'
const img1 = getOssUrl('/personalCenter1.png')
const img2 = getOssUrl('/personalCenter2.png')
const img3 = getOssUrl('/personalCenter3.png')
const img4 = getOssUrl('/personalCenter4.png')
const personalCenterDefaultAvatarImage = getOssUrl('/personalCenterDefaultAvatar.png')
/* mixin */
import { VersionControlLinkCMixin } from '@src/mixins/versionControlMixin';

export default {
  name: 'mform-user-center-preview',
  mixins: [VersionControlLinkCMixin],
  props: previewProps,
  data() {
    return {
      personalCenterDefaultAvatarImage,
      serviceList: [
        {
          text: 'processing',
          photo: img1,
        },
        {
          text: 'completed',
          photo: img2,
        },
        {
          text: 'review',
          photo: img3,
        },
        {
          text: 'all',
          photo: img4,
        },
      ],
      toolInitList: [
        {
          title: '订单列表',
          icon: 'icon-order',
          key: 'orderList',
        },
        {
          title: '产品列表',
          icon: 'icon-tasklist',
        },
        {
          title: '收藏列表',
          icon: 'icon-pingjiabeifen1',
        },
        {
          title: '多语言',
          icon: 'icon-earth',
        },
        {
          title: '寄修列表',
          icon: 'icon-tongzhi-jixiu',
        },
      ],
    };
  },
  computed: {
    formDesignComponent() {
      return findComponentUpward(this, 'mform-design');
    },
    formPreviewComponent() {
      return findComponentUpward(this, 'mform-preview');
    },
    grayState() {
      return this.formPreviewComponent.grayState ?? false;
    },
    styleHeight() {
      return `${this.formPreviewComponent.$el.offsetHeight}px` || '658px';
    },
    isChinese() {
      return this?.$i18n.locale === 'zh';
    },
    toolList() {
      // if (this.grayState) {
      //   const toolList = this.toolInitList;
      //   toolList.unshift({ title: '退换货列表', icon: 'icon-tuihuanhuo' });
      //   return toolList;
      // }

      if (!this.isChinese) {
        return this.toolInitList.slice(2);
      }

      if (!this.isOpenMultiLanguage) {
        return this.toolInitList.slice(0, 2);
      }

      return this.toolInitList;
    },
    filterToolList() {
      return this.toolList.filter((item) => {

        if (item.key === 'orderList') {
          return this._isShowLinkCOrderList;
        }

        return true;
      });
    },
    isOpenMultiLanguage() {
      return this.formDesignComponent?.isOpenMultiLanguage || this.formPreviewComponent?.isOpenMultiLanguage;
    },
  },
};
</script>

<style lang="scss" scoped>
.form-preview-group {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fafafa;
  overflow: auto;

  .form-preview-personal-info {
    width: 100%;
    height: auto;
    // background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);

    .form-preview-info-top {
      height: 103px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .form-preview-info-left {
        display: flex;
        align-items: center;

        img {
          width: 56px;
          height: 56px;
          margin: 0 23px 0 25px;
        }

        h3 {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #262626;
          line-height: 18px;
          margin: 0;
        }
      }

      .form-preview-info-right {
        display: flex;
        align-items: center;
        color: #8c8c8c;
        margin-right: 26px;

        span {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 20px;
          margin: 0 14px 0 8px;
        }
      }
    }

    .form-preview-info-bottom {
      height: 46px;
      display: flex;
      justify-content: center;

      div {
        height: 100%;
        width: 323px;
        background: url('../../../assets/img/personalCenterHeader.png')
          no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px 0 16px;
        color: #f0cb91;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
    }
  }

  .form-preview-service-record {
    width: 343px;
    height: 120px;
    // background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    background: #ffffff;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1),
      0px 1px 4px 0px rgba(0, 0, 0, 0.02);
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 13px;

    span {
      height: 40px;
    }
  }

  .form-preview-essential-tool {
    width: 343px;
    height: auto;
    background: #ffffff;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1),
      0px 1px 4px 0px rgba(0, 0, 0, 0.02);
    border-radius: 4px;

    .form-preview-tool-item {
      height: 56px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #8c8c8c;
      padding: 0 13px 0 19px;
      border-top: 1px solid #e8e8e8;

      div {
        display: flex;
        align-items: center;
        color: #262626;

        i {
          margin-right: 12px;
        }

        span {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 20px;
        }
      }
    }

    .form-preview-tool-item:first-child {
      border: none;
    }
  }
}
</style>
